<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blog/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blog/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/blog/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/blog/images/logo.svg" color="#222">

<link rel="stylesheet" href="/blog/css/main.css">


<link rel="stylesheet" href="/blog/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"dttx123.gitee.io","root":"/blog/","scheme":"Gemini","version":"8.0.0-rc.2","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},"path":"search.xml"};
  </script>

  <meta name="description" content="HTML5的发展(了解) 1-HTML  的历史：1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML 4.01 版本稳定下来。 后来逐渐被更加严格的 XHTML 取代。">
<meta property="og:type" content="article">
<meta property="og:title" content="H5C3">
<meta property="og:url" content="http://dttx123.gitee.io/2018/01/01/H5C3/H5C3/index.html">
<meta property="og:site_name" content="Starry Night">
<meta property="og:description" content="HTML5的发展(了解) 1-HTML  的历史：1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML 4.01 版本稳定下来。 后来逐渐被更加严格的 XHTML 取代。">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/.%5Cimg%5Cform.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/s1.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/s2.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/s3.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/box.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/line.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/fx.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/radius.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/bd.jpg">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/sepan.jpg">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/rotate.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/skew.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/xyz.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/toushi.jpg">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/per.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/preserve.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/three.png">
<meta property="og:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/flex.png">
<meta property="article:published_time" content="2017-12-31T16:00:00.000Z">
<meta property="article:modified_time" content="2020-05-13T12:42:07.151Z">
<meta property="article:author" content="大春哥">
<meta property="article:tag" content="H5C3">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://dttx123.gitee.io/blog/2018/01/01/H5C3/H5C3/.%5Cimg%5Cform.png">

<link rel="canonical" href="http://dttx123.gitee.io/2018/01/01/H5C3/H5C3/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>H5C3 | Starry Night</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
        <span class="toggle-line toggle-line-first"></span>
        <span class="toggle-line toggle-line-middle"></span>
        <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/blog/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">Starry Night</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
      <p class="site-subtitle" itemprop="description">这就朕为你打下的江山</p>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/blog/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-tags">

    <a href="/blog/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blog/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blog/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blog/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result">
  <div id="no-result">
    <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>
  </div>
</div>

    </div>
  </div>

</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://dttx123.gitee.io/2018/01/01/H5C3/H5C3/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blog/images/avatar.jpg">
      <meta itemprop="name" content="大春哥">
      <meta itemprop="description" content="IT">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Starry Night">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          H5C3
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2018-01-01 00:00:00" itemprop="dateCreated datePublished" datetime="2018-01-01T00:00:00+08:00">2018-01-01</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="far fa-calendar-check"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-05-13 20:42:07" itemprop="dateModified" datetime="2020-05-13T20:42:07+08:00">2020-05-13</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blog/categories/H5C3/" itemprop="url" rel="index"><span itemprop="name">H5C3</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h2 id="HTML5的发展-了解"><a href="#HTML5的发展-了解" class="headerlink" title="HTML5的发展(了解)"></a>HTML5的发展(了解)</h2><blockquote>
<p>1-HTML  的历史：<br>1993 年 HTML 首次以因特网草案的形式发布，然后经历了 2.0、3.2 和 4.0，直到 1999 年的 HTML 4.01 版本稳定下来。 后来逐渐被更加严格的 XHTML 取代。</p>
</blockquote>
<a id="more"></a>
<blockquote>
<p>2-XHTML 的兴衰史：<br>自从 HTML 4.01 版本之后，掌握着 HTML 规范的万维网联网（W3C）组织没有再发布新的标准，而是围绕着 XHTML 1.0 以及之后的 XHTML 2.0 展开工作。XHTML 是基于 XML 、致力于实现更加严格并且统一的编码规范的 HTML 版本，解决之前的 HTML 4.01 版本时，由于编码不规范导致浏览器的各种古怪行为。对于开发者来说，XHTML 极大的好处，就是强迫开发者养成良好的编码习惯，放弃 HTML 的凌乱写法，最终降低了浏览器解析页面的难度，方便移植到更多平台。<br>但是XHTML 带来的确实毁灭性的灾难，XHTML 2.0 规范了更严格的错误处理规则，强制要求浏览器拒绝无效的 XHTML 2 页面，强制 Web 开发者写出绝对正确规范的代码，同时不得向下兼容，这将意味着，之前已经写好的数亿的页面将无法兼容，并且Web开发者的难度又被加大，最终被抛弃了哦！</p>
</blockquote>
<blockquote>
<p>3-HTML 5 的到来：<br>2008 年 W3C 发布了 HTML 5 的工作草案，2009 年停止了 XHTML 2 计划。随着时间推移，HTML 5 规范进一步解决了诸多非常实际的问题，各大浏览器厂商开始对旗下的产品进行升级，以便支持 HTML 5 。HTML 5 规范得到了持续的进步和完善，从而迅速融入到 Web 平台的实质性改进中。<br>和 XHTML 2.0 不同，制定 HTML 5 规范的并不想挑出以往 HTML 的各种毛病为其改正，而是尽可能的补全 Web 开发者急需的各种功能。这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画（Canvas）、Web 通信等等。</p>
</blockquote>
<h2 id="HTML5的概念"><a href="#HTML5的概念" class="headerlink" title="HTML5的概念"></a>HTML5的概念</h2><p>​    <strong>狭义概念</strong>： 是html4的升级版,新增了标签，对标签进行了优化。</p>
<p>​    <strong>广义概念</strong>：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器呈现技术得到了一个飞跃发展和广泛支持，它包括：HTML5，CSS3，Javascript，API在内的一套技术组合。</p>
<h2 id="语法规范"><a href="#语法规范" class="headerlink" title="语法规范"></a><strong>语法规范</strong></h2><p>​    HTML5在语法规范上也做了比较大的调整，去除了许多冗余的内容，书写规则更加简洁、清晰。</p>
<p>​        1、更简洁</p>
<p>​        2、更宽松 </p>
<p>​            单标签不用写关闭符号<br>​            双标签省略结束标签</p>
<pre><code>html、head、body、tbody可以完全省略        </code></pre><p>​            实际开发中应规范书写，不建议太随意 ！</p>
<h2 id="新增语义标签及兼容"><a href="#新增语义标签及兼容" class="headerlink" title="新增语义标签及兼容"></a>新增语义标签及兼容</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">header</span>&gt;</span> 表示页眉</span><br><span class="line"><span class="tag">&lt;<span class="name">footer</span>&gt;</span> 表示页脚</span><br><span class="line"><span class="tag">&lt;<span class="name">section</span>&gt;</span> 表示区块</span><br><span class="line"><span class="tag">&lt;<span class="name">article</span>&gt;</span> 表示文章 如文章、评论、帖子、博客</span><br><span class="line"><span class="tag">&lt;<span class="name">aside</span>&gt;</span> 表示侧边栏 如文章的侧栏</span><br><span class="line">  </span><br><span class="line">本质上新语义标签与<span class="tag">&lt;<span class="name">div</span>&gt;</span>、<span class="tag">&lt;<span class="name">span</span>&gt;</span>没有区别，只是其具有表意性</span><br></pre></td></tr></table></figure>

<p>H5的相关知识在IE9以下浏览器普遍存在兼容问题：</p>
<p>​对于html5的语义标签的兼容问题，可以通过引入 htmlshiv.min.js 来解决；</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 为了解决ie9以下的浏览器不支持语义标签--&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 条件注释 ：满足条件则引入问题 如果不满足就是一个普通的注释 只有ie能够识别 --&gt;</span></span><br><span class="line"><span class="comment">&lt;!--</span></span><br><span class="line"><span class="comment">    less  小于</span></span><br><span class="line"><span class="comment">    equal 等于</span></span><br><span class="line"><span class="comment">    great 大于</span></span><br><span class="line"><span class="comment">    than  比较</span></span><br><span class="line"><span class="comment">--&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!--[if lt IE 9]&gt;</span></span><br><span class="line"><span class="comment">    &lt;script src="html5shiv.min.js"&gt;&lt;/script&gt;</span></span><br><span class="line"><span class="comment">&lt;![endif]--&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h2><p><img src="/blog/2018/01/01/H5C3/H5C3/.%5Cimg%5Cform.png" alt></p>
<p>表单类型</p>
<table>
<thead>
<tr>
<th>类型</th>
<th>使用示例</th>
<th>含义</th>
</tr>
</thead>
<tbody><tr>
<td><strong>email</strong></td>
<td>type=”email”</td>
<td>输入邮箱格式</td>
</tr>
<tr>
<td><strong>tel</strong></td>
<td>type=”tel”</td>
<td>输入手机号码格式</td>
</tr>
<tr>
<td><strong>url</strong></td>
<td>type=”url”</td>
<td>输入url格式</td>
</tr>
<tr>
<td><strong>number</strong></td>
<td>type=”number”</td>
<td>输入数字格式</td>
</tr>
<tr>
<td><strong>search</strong></td>
<td>type=”search”</td>
<td>搜索框（体现语义化）</td>
</tr>
<tr>
<td><strong>range</strong></td>
<td>type=”range”</td>
<td>自由拖动滑块</td>
</tr>
<tr>
<td><strong>color</strong></td>
<td>type=”color”</td>
<td>拾色器</td>
</tr>
<tr>
<td><strong>time</strong></td>
<td>type=”time”</td>
<td>时间</td>
</tr>
<tr>
<td><strong>date</strong></td>
<td>type=”date”</td>
<td>日期</td>
</tr>
<tr>
<td><strong>datetime</strong></td>
<td>type=”datetime”</td>
<td>日期时间</td>
</tr>
<tr>
<td><strong>month</strong></td>
<td>type=”month”</td>
<td>月份</td>
</tr>
<tr>
<td><strong>week</strong></td>
<td>type=”week”</td>
<td>周</td>
</tr>
</tbody></table>
<blockquote>
<p>  部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。</p>
</blockquote>
<p>表单属性：</p>
<table>
<thead>
<tr>
<th><strong>属性</strong></th>
<th><strong>用法</strong></th>
<th><strong>含义</strong></th>
</tr>
</thead>
<tbody><tr>
<td><strong>placeholder</strong></td>
<td>type=”text” placeholder=”请输入用户名”</td>
<td>占位符</td>
</tr>
<tr>
<td><strong>autofocus</strong></td>
<td>type=”text” autofocus</td>
<td>自动获得焦点</td>
</tr>
<tr>
<td><strong>multiple</strong></td>
<td>type=”file” multiple</td>
<td>多文件上传</td>
</tr>
<tr>
<td><strong>autocomplete</strong></td>
<td>type=”text” autocomplete=”off”</td>
<td>自动完成</td>
</tr>
<tr>
<td>&lt;!–</td>
<td><strong>required</strong></td>
<td>type=”text” required</td>
</tr>
</tbody></table>
<h2 id="DOM扩展"><a href="#DOM扩展" class="headerlink" title="DOM扩展"></a>DOM扩展</h2><h3 id="获取元素的新方法"><a href="#获取元素的新方法" class="headerlink" title="获取元素的新方法"></a>获取元素的新方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//通过css选择器获取元素，返回符合要求的第一个元素,注意返回结果是对象</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(“css选择器”)</span><br><span class="line"></span><br><span class="line"><span class="comment">//通过css选择器获取元素，返回伪数组</span></span><br><span class="line"><span class="built_in">document</span>.querySelectorAll(“css选择器”)</span><br></pre></td></tr></table></figure>



<h3 id="类名操作"><a href="#类名操作" class="headerlink" title="类名操作"></a>类名操作</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//添加类</span></span><br><span class="line">node.classList.add(“classname”);</span><br><span class="line"><span class="comment">//移除类</span></span><br><span class="line">node.classList.remove(“classname”);</span><br><span class="line"><span class="comment">//切换类</span></span><br><span class="line">node.classList.toggle(“classname”);</span><br><span class="line"><span class="comment">//判断是否包含指定的类</span></span><br><span class="line">node.classList.contains(“classname”);</span><br></pre></td></tr></table></figure>
<p>注意：H5新增的API，IE8以下的浏览器有兼容问题。</p>
<p>###自定义属性</p>
<p>​在HTML5中我们可以自定义属性，其格式如下data-*=””，例如 data-info=”自定义属性”，</p>
<p>通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。</p>
<p>​Node.dataset是以对象形式存在的</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">data-name</span>=<span class="string">"zs"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">//获取data-name属性的值  </span></span></span><br><span class="line"><span class="javascript"><span class="keyword">var</span> divName = <span class="built_in">document</span>.querySelector(<span class="string">'div'</span>).dataset[<span class="string">'name'</span>];</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h1 id="CSS3"><a href="#CSS3" class="headerlink" title="CSS3"></a>CSS3</h1><p>​如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。</p>
<h3 id="CSS3的现状"><a href="#CSS3的现状" class="headerlink" title="CSS3的现状"></a>CSS3的现状</h3><p>1、浏览器支持程度比较好，需要添加私有前缀 </p>
<p>2、移动端支持优于PC端  </p>
<h3 id="如何对待"><a href="#如何对待" class="headerlink" title="如何对待"></a><strong>如何对待</strong></h3><p>1、遵循 渐进增强 原则</p>
<p> 渐进增强： 让低版本浏览器 可以使用最基本的功能，高版本的浏览器具有更好的用户体验</p>
<p>2、考虑用户群体</p>
<p>3、遵照产品的方案</p>
<p>4、听Boss的</p>
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><h3 id="关系选择器"><a href="#关系选择器" class="headerlink" title="关系选择器"></a>关系选择器</h3><p><img src="/blog/2018/01/01/H5C3/H5C3/s1.png" alt></p>
<h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><p><img src="/blog/2018/01/01/H5C3/H5C3/s2.png" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">^ 开始  $ 结束 * 包含</span><br><span class="line">属性选择器   属性  []</span><br><span class="line">div[title] 选中页面中带有title属性的div</span><br><span class="line">div[title&#x3D;&quot;aa&quot;] 选中页面中带有title属性的div,并且title属性取值为aa</span><br><span class="line"></span><br><span class="line">div[title^&#x3D;&quot;aa&quot;] 选中页面中带有title属性的div,并且title属性取值以aa开始</span><br><span class="line">div[title$&#x3D;&quot;aa&quot;] 选中页面中带有title属性的div,并且title属性取值以aa结尾</span><br><span class="line">div[title*&#x3D;&quot;aa&quot;] 选中页面中带有title属性的div,并且title属性取值包含aa</span><br></pre></td></tr></table></figure>

<h3 id="伪类选择器"><a href="#伪类选择器" class="headerlink" title="伪类选择器"></a>伪类选择器</h3><p><img src="/blog/2018/01/01/H5C3/H5C3/s3.png" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;*结构 伪类选择器   符号：一个冒号</span><br><span class="line">  :hover  :active   可以一种状态</span><br><span class="line">  结构伪类 通过结构进行筛选的一种伪类</span><br><span class="line">  li:first-child:选中li的父盒子下面的第一个子盒子</span><br><span class="line">  li:last-child:选中li的父盒子下面的最后一个子盒子</span><br><span class="line">  li:nth-child(n):选中li的父盒子下面的第n个子盒子</span><br><span class="line">  li:nth-last-child(n): 从后向前选中第n个子元素</span><br><span class="line">  n 是从0开始正整数 0,1,2,3,4,5....  n小于1是无效的</span><br><span class="line"></span><br><span class="line">  偶数： 2n  even   奇数：2n+1 2n-1  odd</span><br><span class="line">  -n+5 选中前5个</span><br><span class="line">*&#x2F;</span><br></pre></td></tr></table></figure>

<h3 id="其他选择器"><a href="#其他选择器" class="headerlink" title="其他选择器"></a>其他选择器</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">:focus    查找获取到焦点的文本框</span><br><span class="line">:checked 获得选中的checkbox</span><br><span class="line">:disabled 获得不可用的框</span><br><span class="line">:enabled 获得可用的框 </span><br><span class="line">:not(selector)选择不匹配selector的那些元素</span><br><span class="line">:target  获取当前活跃的锚点链接</span><br></pre></td></tr></table></figure>

<h3 id="伪元素选择器"><a href="#伪元素选择器" class="headerlink" title="伪元素选择器"></a>伪元素选择器</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">E::before  E::after</span><br><span class="line">注意事项：</span><br><span class="line">&#x2F;&#x2F;1.    必须指定content属性，可以在content属性中写入文本内容，但是通常为空字符串。</span><br><span class="line">&#x2F;&#x2F;2.    默认是行内元素，无法设置宽高，需要指定display:block或者position:absolute</span><br><span class="line">E::before :在元素子节点的最前面添加一个内容。</span><br><span class="line">E::after  :在元素子节点的最后面添加一个内容。</span><br><span class="line"></span><br><span class="line">E::first-line 选中第一行</span><br><span class="line">E::first-letter 选中第一个字</span><br><span class="line">E::selection 被选中的区域</span><br></pre></td></tr></table></figure>



<h1 id="盒子模型-box-sizing"><a href="#盒子模型-box-sizing" class="headerlink" title="盒子模型(box-sizing)"></a>盒子模型(box-sizing)</h1><blockquote>
<p>CSS3中可以通过box-sizing 来指定盒子模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。</p>
</blockquote>
<p>可以分成两种情况：</p>
<p>1、box-sizing: border-box  盒子大小为 width</p>
<p>2、box-sizing: content-box  盒子大小为 width + padding + border</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/box.png" alt></p>
<h1 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h1><blockquote>
<p>在css2中已经有background属性了，用于设置盒子的背景相关的一些样式，在CSS3中新增加了几个背景相关的几个属性。</p>
</blockquote>
<h2 id="background-size"><a href="#background-size" class="headerlink" title="background-size"></a>background-size</h2><blockquote>
<p>用户设置背景图片的尺寸大小</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注意：这两种设置方式会导致图片失真。</span></span><br><span class="line"><span class="comment">/*background-size:设置背景图片的大小*/</span></span><br><span class="line">background-size: <span class="number">600</span>px <span class="number">400</span>px;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 百分比是相对于盒子自身的宽度和高度 */</span></span><br><span class="line">background-size: <span class="number">100</span>% <span class="number">100</span>%;</span><br></pre></td></tr></table></figure>



<p>不失真的设置方式（等比例缩放）</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*containe保证等比例缩放,但是会出现留白*/</span></span><br><span class="line">background-size: contain;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*cover保证等比例缩放,并且不会留白，但是出现有一部分图片不显示*/</span></span><br><span class="line">background-size: cover;</span><br></pre></td></tr></table></figure>



<h2 id="background-clip-了解"><a href="#background-clip-了解" class="headerlink" title="background-clip(了解)"></a>background-clip(了解)</h2><blockquote>
<p>设置背景区域的大小</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*盒子的背景区域是整个盒子，包括边框和padding*/</span></span><br><span class="line"><span class="comment">/*默认值，设置背景区域包括了边框*/</span></span><br><span class="line">background-clip: border-box;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*背景区域只包含padding和content*/</span></span><br><span class="line">background-clip: padding-box;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*背景区域只包含content*/</span></span><br><span class="line">background-clip: content-box;</span><br></pre></td></tr></table></figure>



<h2 id="background-origin-了解"><a href="#background-origin-了解" class="headerlink" title="background-origin(了解)"></a>background-origin(了解)</h2><blockquote>
<p>设置背景图片的原点的位置，默认是padding的地方开始</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">background-image: url(./bg.jpg);</span><br><span class="line"><span class="comment">/*设置原点从border开始*/</span></span><br><span class="line">background-origin: border-box;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*设置原点从padding开始,默认值*/</span></span><br><span class="line">background-origin: padding-box;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*设置原点从content开始*/</span></span><br><span class="line">background-origin: content-box;</span><br></pre></td></tr></table></figure>





<h2 id="多重背景"><a href="#多重背景" class="headerlink" title="多重背景"></a>多重背景</h2><blockquote>
<p>background设置背景的时候，可以设置多个背景图片，使用逗号隔开。注意颜色只能设置一次，并且通常来说，颜色都是在最后面进行设置。</p>
<p>background是一个合写的属性，如果在background之前设置了background相关的样式，会被覆盖掉。</p>
</blockquote>
<figure class="highlight"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">background: url(./mn1.jpg) no-repeat top left, url("./mn2.jpg") no-repeat right bottom, pink;</span><br></pre></td></tr></table></figure>



<h1 id="渐变"><a href="#渐变" class="headerlink" title="渐变"></a>渐变</h1><h2 id="线性渐变"><a href="#线性渐变" class="headerlink" title="线性渐变"></a>线性渐变</h2><blockquote>
<p>linear-gradient指沿着某条直线朝一个方向产生的渐变效果。</p>
</blockquote>
<p><img src="/blog/2018/01/01/H5C3/H5C3/line.png" alt></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//注意：渐变实际上相当与一张图片，因为需要加给background-image才会生效</span></span><br><span class="line"><span class="comment">//渐变的两个要求：有区间，有颜色变化。</span></span><br><span class="line"><span class="comment">//最简单的渐变</span></span><br><span class="line">background-image: linear-gradient(red, green);</span><br><span class="line"><span class="comment">//设定渐变的方向</span></span><br><span class="line">background-image: linear-gradient(to right, red, green);</span><br><span class="line"><span class="comment">//也可以设定渐变的角度</span></span><br><span class="line">background-image: linear-gradient(<span class="number">45</span>deg, red, green);</span><br><span class="line"><span class="comment">//设定渐变的范围</span></span><br><span class="line">background-image: linear-gradient(to right, red <span class="number">20</span>%, green <span class="number">80</span>%)</span><br><span class="line"><span class="comment">//每一个区间表示渐变颜色的范围</span></span><br><span class="line">background-image: linear-gradient(to right, red <span class="number">20</span>%, green <span class="number">20</span>%)</span><br></pre></td></tr></table></figure>



<p>渐变方向：</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/fx.png" alt></p>
<h2 id="径向渐变"><a href="#径向渐变" class="headerlink" title="径向渐变"></a>径向渐变</h2><blockquote>
<p>radial-gradient指从一个中心点开始沿着四周产生渐变效果</p>
</blockquote>
<p><img src="/blog/2018/01/01/H5C3/H5C3/radius.png" alt></p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#x2F;*1. 最简单的渐变*&#x2F;</span><br><span class="line">background-image: radial-gradient(red, green);</span><br><span class="line"></span><br><span class="line">&#x2F;*2. 指定圆的半径和圆心*&#x2F;</span><br><span class="line">background-image: radial-gradient(200px at center, red, green);</span><br><span class="line"></span><br><span class="line">&#x2F;*3. 指定椭圆*&#x2F;</span><br><span class="line">background-image: radial-gradient(200px 80px at center, red, green);</span><br><span class="line"></span><br><span class="line">&#x2F;*4. 指定范围*&#x2F;</span><br><span class="line">background-image: radial-gradient(200px at center, green 50%, red 50%);</span><br></pre></td></tr></table></figure>



<h2 id="圆角"><a href="#圆角" class="headerlink" title="圆角"></a>圆角</h2><p>border-radius    每个角可以设置两个值 ，x 值，y值</p>
<p>圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。如下图 </p>
<p>可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1<del>4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1</del>4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/bd.jpg" alt="img"> </p>
<h1 id="阴影"><a href="#阴影" class="headerlink" title="阴影"></a>阴影</h1><p>###盒子阴影：</p>
<pre><code>box-shadow :阴影的水平位移  垂直位移 模糊程度 阴影大小 阴影颜色 inset（内阴影）
  默认是外阴影</code></pre><h3 id="文字阴影："><a href="#文字阴影：" class="headerlink" title="文字阴影："></a>文字阴影：</h3><p>text-shadow :阴影的水平位移  垂直位移 模糊程度 阴影颜色 </p>
<h1 id="颜色"><a href="#颜色" class="headerlink" title="颜色"></a>颜色</h1><p>​新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。</p>
<p>​RGBA: Red、Green、Blue、Alpha</p>
<p>​HLSA:  Hue、Saturation、Lightness、Alpha</p>
<p>​H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色</p>
<p>​S 饱和度 取值范围0%~100%</p>
<p>​L 亮度 取值范围0%~100%</p>
<p>​A 透明度 取值范围0~1</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/sepan.jpg" alt></p>
<h1 id="过渡"><a href="#过渡" class="headerlink" title="过渡"></a>过渡</h1><blockquote>
<p>transition：过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。</p>
</blockquote>
<p>关于补间动画与帧动画</p>
<ul>
<li>帧动画：通过一帧一帧的画面按照固定顺序和速度播放。比如电影胶片</li>
<li>补间动画：补间动画只需要起始状态和终止状态，浏览器会自动完成中间的过渡。[<a href="http://mux.alimama.com/posts/1009]" target="_blank" rel="noopener">http://mux.alimama.com/posts/1009]</a>(<a href="http://mu" target="_blank" rel="noopener">http://mu</a> x.alimama.com/posts/1009)</li>
</ul>
<h2 id="过渡的属性"><a href="#过渡的属性" class="headerlink" title="过渡的属性"></a>过渡的属性</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//transition-property：设置过渡属性</span></span><br><span class="line"><span class="comment">//也可以是width,height</span></span><br><span class="line">transition-property:all;</span><br><span class="line"></span><br><span class="line"><span class="comment">//transition-duration:设置过渡时间</span></span><br><span class="line">transition-duration:<span class="number">1</span>s;<span class="comment">/*过渡的时间*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//transition-delay：设置过渡延时</span></span><br><span class="line">transition-delay:<span class="number">2</span>s;<span class="comment">/*2秒之后才进行动画*/</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//transition-timing-function:设置过渡的速度</span></span><br><span class="line"><span class="comment">//linear，ease，ease-in，ease-out，ease-in-out， steps(10)</span></span><br><span class="line">transition-timing-<span class="function"><span class="keyword">function</span>:<span class="title">linear</span>;</span></span><br></pre></td></tr></table></figure>

<p>【演示】</p>
<h2 id="属性合写"><a href="#属性合写" class="headerlink" title="属性合写"></a>属性合写</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*属性 时间 延时 速度*/</span></span><br><span class="line">transition: width <span class="number">1</span>s <span class="number">3</span>s linear, height <span class="number">3</span>s <span class="number">1</span>s ease;</span><br></pre></td></tr></table></figure>



<p>过渡的注意点：</p>
<ul>
<li>过渡必须要有两个状态的变化。</li>
<li>过渡可以写在A状态，也可以写在B状态，但是如果写在B状态，那么回来的时候，就没有过渡效果了。</li>
</ul>
<h1 id="2D转换"><a href="#2D转换" class="headerlink" title="2D转换"></a>2D转换</h1><blockquote>
<p>transform: 转换，是CSS3最具颠覆性的几个特性之一，既可以用于2D转换，也可以用于3D转换。</p>
<p>transform：2D转换，元素在平面上实现移动、旋转、缩放、斜切等操作</p>
</blockquote>
<h2 id="scale缩放"><a href="#scale缩放" class="headerlink" title="scale缩放"></a>scale缩放</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">transform: scaleX(<span class="number">0.5</span>);<span class="comment">//让宽度变化</span></span><br><span class="line">transform: scaleY(<span class="number">0.5</span>);<span class="comment">//让高度变化，注意不能写多个transform，不然会覆盖。</span></span><br><span class="line">transform: scale(<span class="number">0.5</span>);<span class="comment">//让宽度和高度同时变化</span></span><br></pre></td></tr></table></figure>
<p>注意：</p>
<ul>
<li>scale接收的值是倍数，因此没有单位</li>
<li>scale可以是一个值，如果是一个值，不是说仅仅缩放宽度，高度也会等比例的缩放。</li>
<li>可以通过transform-origin设定旋转原点</li>
</ul>
<h2 id="translate平移"><a href="#translate平移" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: translateX(<span class="number">100</span>px);</span><br><span class="line">transform: translateY(<span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">100</span>px, <span class="number">100</span>px);</span><br><span class="line">transform: translate(<span class="number">50</span>%, <span class="number">50</span>%);</span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>translate的值可以是px，也可以是百分比，如果是百分比，那么参照的是自身的宽高。</li>
<li>translate移动的元素并不会影响其他盒子，类似于相对定位。</li>
</ul>
<h2 id="rotate旋转"><a href="#rotate旋转" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">360</span>deg);<span class="comment">//旋转360度</span></span><br><span class="line">transform: rotate(<span class="number">-360</span>deg);<span class="comment">//逆时针旋转360度</span></span><br></pre></td></tr></table></figure>

<p>注意：</p>
<ul>
<li>单位是deg，角度，不是px</li>
<li>正值顺时针转，负值逆时针转</li>
<li>可以通过transform-origin设定旋转原点</li>
<li>转换原点写在A状态，不能写在B状态</li>
</ul>
<p><img src="/blog/2018/01/01/H5C3/H5C3/rotate.png" alt></p>
<h2 id="skew斜切"><a href="#skew斜切" class="headerlink" title="skew斜切"></a>skew斜切</h2><blockquote>
<p>skew在实际开发中，是用的最少的一个属性。一般来说，x和y只会倾斜其中的一个</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*在水平方向倾斜30deg*/</span></span><br><span class="line">transform: skewX(<span class="number">30</span>deg);</span><br><span class="line"></span><br><span class="line"><span class="comment">/*在垂直方向倾斜30deg*/</span></span><br><span class="line">transform: skewY(<span class="number">30</span>deg);</span><br></pre></td></tr></table></figure>

<p><img src="/blog/2018/01/01/H5C3/H5C3/skew.png" alt></p>
<h2 id="transform-origin转换原点"><a href="#transform-origin转换原点" class="headerlink" title="transform-origin转换原点"></a>transform-origin转换原点</h2><blockquote>
<p>通过transform-origin可以设置转换的中心原点。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">transform-origin: center center;</span><br><span class="line">transform-origin: <span class="number">40</span>px <span class="number">40</span>px;</span><br></pre></td></tr></table></figure>

<p>【案例：03-transform-origin设置转换原点.html】</p>
<h2 id="转换合写问题"><a href="#转换合写问题" class="headerlink" title="转换合写问题"></a>转换合写问题</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform:translateX(<span class="number">800</span>px) scale(<span class="number">1.5</span>) rotate(<span class="number">360</span>deg) ;</span><br><span class="line"><span class="comment">//1. transform属性只能写一个，如果写了多个会覆盖</span></span><br><span class="line"><span class="comment">//2. transform属性可以连写，但是顺序对效果影响的，因为它会在第一个效果的基础上执行第二个效果，然后执行第三个效果（通常会把rotate放后面）</span></span><br><span class="line"><span class="comment">//3. 如果对transform进行过度效果的时候，初始状态和结束状态一一对应</span></span><br></pre></td></tr></table></figure>
<h1 id="3D转换"><a href="#3D转换" class="headerlink" title="3D转换"></a>3D转换</h1><blockquote>
<p>transform:不仅可以2D转换，还可以进行3D转换。</p>
</blockquote>
<p>思考：2D与3D的区别？</p>
<h2 id="坐标轴"><a href="#坐标轴" class="headerlink" title="坐标轴"></a>坐标轴</h2><blockquote>
<p>用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。<strong><em>注意+Y是向下的。</em></strong> </p>
</blockquote>
<p><img src="/blog/2018/01/01/H5C3/H5C3/xyz.png" alt></p>
<h2 id="rotate旋转-1"><a href="#rotate旋转-1" class="headerlink" title="rotate旋转"></a>rotate旋转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">transform: rotate(<span class="number">45</span>deg);<span class="comment">// 让元素在平面2D中旋转</span></span><br><span class="line">transform: rotateX(<span class="number">45</span>deg);<span class="comment">// 让元素沿着X轴转45度</span></span><br><span class="line">transform: rotateY(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Y轴转45度</span></span><br><span class="line">transform: rotateZ(<span class="number">45</span>deg);<span class="comment">// 让元素沿着Z轴转45度</span></span><br></pre></td></tr></table></figure>



<p>问题：看不出来怎么转的，为什么现实生活中能够看出来？ </p>
<h2 id="translate平移-1"><a href="#translate平移-1" class="headerlink" title="translate平移"></a>translate平移</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*沿着X轴的正方向移动45px*/</span></span><br><span class="line">transform: translateX(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateY(<span class="number">45</span>px);</span><br><span class="line"><span class="comment">/*沿着Y轴的正方向移动45px*/</span></span><br><span class="line">transform: translateZ(<span class="number">45</span>px);</span><br></pre></td></tr></table></figure>



<h2 id="perspective透视"><a href="#perspective透视" class="headerlink" title="perspective透视"></a>perspective透视</h2><blockquote>
<p>电脑显示屏是一个2D的平面，因为我们看不出来旋转的方向，通过perspective属性，可以定义3D 元素距视图的距离，单位是px。</p>
<p>说白了，设置了perspective属性后，就有了进大远小的效果了，在视觉上，让我们能看出来3d的效果。</p>
</blockquote>
<p><img src="/blog/2018/01/01/H5C3/H5C3/toushi.jpg" alt></p>
<blockquote>
<p>注意：当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">perspective：<span class="number">500</span>px;</span><br></pre></td></tr></table></figure>

<p>关于近大远小</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/per.png" alt>2</p>
<p>透视本质上设置的是用户的眼睛和屏幕的距离；</p>
<p>对于我们眼睛来说，离我们越近的房子，我们会感觉到这个房子越大，离我们越远的房子，就会感觉越小，其实房子的大小都是一样的，只是在视觉上的一种不同。</p>
<h2 id="ransform-style"><a href="#ransform-style" class="headerlink" title="ransform-style"></a>ransform-style</h2><blockquote>
<p>transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性只能给父元素添加。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">flat:默认值，<span class="number">2</span>d显示</span><br><span class="line">preserve<span class="number">-3</span>d: <span class="number">3</span>d显示</span><br></pre></td></tr></table></figure>

<p>transform-style与perspective的区别</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*透视：透视只是相当于设置了一个距离，辅助我们查看3D效果的工具，*/</span></span><br><span class="line"><span class="comment">/*preserve-3d:给父盒子添加，让子元素保留3D的位置，说白了，只有设置了preserve-3d，这个元素才能被称之为3d元素。 */</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//一个3d元素可以没有perspective，但是不能没有transform-style</span></span><br></pre></td></tr></table></figure>

<p><img src="/blog/2018/01/01/H5C3/H5C3/preserve.png" alt></p>
<p>立方体：</p>
<p><img src="/blog/2018/01/01/H5C3/H5C3/three.png" alt></p>
<p><strong>注意：</strong>  3D 变换中旋转 ，对着正方向去看，正值都是顺时针 负值是逆时针 </p>
<h2 id="backface-visibility"><a href="#backface-visibility" class="headerlink" title="backface-visibility"></a>backface-visibility</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//指定元素背面面向用户时是否可见。 </span></span><br><span class="line"><span class="comment">//visible： 指定元素背面可见，允许显示正面的镜像。 </span></span><br><span class="line"><span class="comment">//hidden： 指定元素背面不可见 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">//注意：只有在3d的情况下，backface-visibility才会生效</span></span><br></pre></td></tr></table></figure>





<h1 id="动画"><a href="#动画" class="headerlink" title="动画"></a>动画</h1><blockquote>
<p>动画也是CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或者一组动画，常用来实现复杂的动画效果。</p>
</blockquote>
<p>动画与过渡的区别：</p>
<ol>
<li>过渡必须触发，需要两个状态的改变。</li>
<li>动画可以一直运行下去，不需要触发。实现效果与过渡差不多</li>
</ol>
<p>【01-动画初体验.html】<br>使用一个动画的基本步骤：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//1.通过@keyframes指定动画序列</span></span><br><span class="line"><span class="comment">//2.通过百分比或者from/to将动画分割成多个节点</span></span><br><span class="line"><span class="comment">//3.在各个节点中分别定义动画属性</span></span><br><span class="line"><span class="comment">//4.通过animation将动画应用于相应的元素</span></span><br></pre></td></tr></table></figure>

<p>【02-keyframes详解.html】</p>
<h2 id="animation详解"><a href="#animation详解" class="headerlink" title="animation详解"></a>animation详解</h2><blockquote>
<p>animation是一个复合属性，一共有8个参数</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">animation-name:动画名称，由@keyframes定义的</span><br><span class="line">animation-duration：动画的持续时间</span><br><span class="line">animation-timing-<span class="function"><span class="keyword">function</span>：动画的过渡类型</span></span><br><span class="line"><span class="function"><span class="title">animation</span>-<span class="title">delay</span>：动画的延迟时间</span></span><br><span class="line"><span class="function"><span class="title">animation</span>-<span class="title">iteration</span>-<span class="title">count</span>：动画的循环次数</span></span><br><span class="line"><span class="function"><span class="title">animation</span>-<span class="title">direction</span>：设置动画在循环中是否反向运动</span></span><br><span class="line"><span class="function"><span class="title">animation</span>-<span class="title">fill</span>-<span class="title">mode</span>：设置动画时间之外的状态</span></span><br><span class="line"><span class="function"><span class="title">animattion</span>-<span class="title">play</span>-<span class="title">state</span>:设置动画的状态。</span></span><br></pre></td></tr></table></figure>



<h2 id="动画库的使用"><a href="#动画库的使用" class="headerlink" title="动画库的使用"></a>动画库的使用</h2><p><a href="https://isux.tencent.com/css3/index.html" target="_blank" rel="noopener">https://isux.tencent.com/css3/index.html</a></p>
<p><a href="https://daneden.github.io/animate.css/" target="_blank" rel="noopener">https://daneden.github.io/animate.css/</a></p>
<h1 id="web字体"><a href="#web字体" class="headerlink" title="web字体"></a>web字体</h1><p>开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。</p>
<p>支持程度比较好，甚至IE低版本浏览器也能支持。</p>
<h2 id="web字体（了解）"><a href="#web字体（了解）" class="headerlink" title="web字体（了解）"></a>web字体（了解）</h2><p>阿里妈妈：<a href="http://iconfont.cn/webfont/#!/webfont/index" target="_blank" rel="noopener">http://iconfont.cn/webfont/#!/webfont/index</a><br>有字库：<a href="http://www.youziku.com/" target="_blank" rel="noopener">http://www.youziku.com/</a><br>1.第一步：使用font-face声明字体<br>   2.第二步：定义使用webfont的样式<br>   3.第三步：为文字加上对应的样式<br>   4.在CSS3中，可以通过@font-face定义新的字体。</p>
<h2 id="字体图标（重点）"><a href="#字体图标（重点）" class="headerlink" title="字体图标（重点）"></a>字体图标（重点）</h2><p>我们经常把网页常用的一些小的图标，做成精灵图，然后通过background-position去调整位置，但是这个需要引入图片，并且图片大小改变之后如果失真。在CSS3中可以使用字体图片，即使用图标跟使用文字一样。<br>优点：<br>1、将所有图标打包成字体库，减少请求；<br>2、具有矢量性，可保证清晰度；<br>3、使用灵活，便于维护；<br>Font Awesome 使用<br><a href="http://fontawesome.dashgame.com/" target="_blank" rel="noopener">http://fontawesome.dashgame.com/</a><br>阿里巴巴矢量图标：（可以自己定制）<br><a href="http://www.iconfont.cn/plus/collections/index?type=1" target="_blank" rel="noopener">http://www.iconfont.cn/plus/collections/index?type=1</a></p>
<h1 id="切割轮播图"><a href="#切割轮播图" class="headerlink" title="切割轮播图"></a>切割轮播图</h1><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//transitionend:过渡完成事件</span></span><br></pre></td></tr></table></figure>





<h1 id="弹性布局-伸缩布局"><a href="#弹性布局-伸缩布局" class="headerlink" title="弹性布局(伸缩布局)"></a>弹性布局(伸缩布局)</h1><blockquote>
<p>布局：其实就是调整元素在水平和垂直方向上的布局方式。</p>
</blockquote>
<p>CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。</p>
<p>【演示：01-伸缩布局初体验.html】</p>
<p>当给一个盒子设置了display：flex之后，这个盒子就有了<strong><em>主轴</em></strong> 和<strong><em>侧轴</em></strong> 的概念。<br>主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向<br>侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的<br>方向：默认<strong><em>主轴从左向右</em></strong> ，默认<strong><em>侧轴从上到下</em></strong> </p>
<blockquote>
<p> 主轴和侧轴并不是固定不变的，通过flex-direction可以互换。</p>
</blockquote>
<p><img src="/blog/2018/01/01/H5C3/H5C3/flex.png" alt></p>
<h2 id="flex-direction"><a href="#flex-direction" class="headerlink" title="flex-direction"></a>flex-direction</h2><blockquote>
<p>flex-diretion主要是用来调整主轴的方向的，默认是水平方向</p>
<p>了解即可，一般来说，很少调整主轴的方向。</p>
</blockquote>
<p>可选值</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">row：主轴方向为水平向右</span><br><span class="line">column：主轴方向为竖直向下</span><br><span class="line">row-reverse:主轴方向为水平向左</span><br><span class="line">column-reverse:主轴方向是竖直向上。</span><br></pre></td></tr></table></figure>


<h2 id="justify-content-重点"><a href="#justify-content-重点" class="headerlink" title="justify-content(重点)"></a>justify-content(重点)</h2><blockquote>
<p>justify-content主要用来设置<strong><em>主轴方向的对齐方式</em></strong> ，可选的值有：</p>
</blockquote>
<p>可选值：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">flex-start: 弹性盒子元素将向起始位置对齐</span><br><span class="line">flex-end: 弹性盒子元素将向结束位置对齐。</span><br><span class="line">center: 弹性盒子元素将向行中间位置对齐</span><br><span class="line">space-around: 弹性盒子元素会平均地分布在行里</span><br><span class="line">space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。</span><br></pre></td></tr></table></figure>

<h2 id="align-items-重点"><a href="#align-items-重点" class="headerlink" title="align-items(重点)"></a>align-items(重点)</h2><blockquote>
<p>align-items用于调整<strong><em>侧轴的对其方式</em></strong> ，可选的值有：</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">flex-start： 元素在侧轴的起始位置对其。 </span><br><span class="line">flex-end： 元素在侧轴的结束位置对其。</span><br><span class="line">center： 元素在侧轴上居中对其。</span><br><span class="line">stretch： 元素的高度会被拉伸到最大（不能给死高度）。</span><br></pre></td></tr></table></figure>



<h2 id="flex-wrap"><a href="#flex-wrap" class="headerlink" title="flex-wrap"></a>flex-wrap</h2><blockquote>
<p>flex-wrap属性控制flex容器是单行或者多行,默认不换行</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">nowrap： 不换行（默认），会压缩子盒子的宽度。</span><br><span class="line">wrap： 当宽度不够的时候，会换行。</span><br></pre></td></tr></table></figure>

<h2 id="align-content"><a href="#align-content" class="headerlink" title="align-content"></a>align-content</h2><blockquote>
<p>align-content用来设置多行的flex容器的排列方式。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">flex-start： 各行向侧轴的起始位置堆叠。 </span><br><span class="line">flex-end： 各行向弹性盒容器的结束位置堆叠。</span><br><span class="line">center： 各行向弹性盒容器的中间位置堆叠。</span><br><span class="line">space-between： 各行在侧轴中平均分布。 </span><br><span class="line">space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。 </span><br><span class="line">stretch：拉伸，不设置高度的情况下。</span><br></pre></td></tr></table></figure>

<p>align-items与align-content的区别</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">align-items调整的是侧轴的对其方式，不换行一般用align-items</span><br><span class="line">align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。</span><br></pre></td></tr></table></figure>



<h2 id="flex属性"><a href="#flex属性" class="headerlink" title="flex属性"></a>flex属性</h2><blockquote>
<p><strong><em>上述讲的属性都是给父盒子设置的，接下来的几个属性是给子盒子设置的。</em></strong> </p>
<p>flex属性用来设置子盒子如何分配空间</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">flex:<span class="number">1</span></span><br></pre></td></tr></table></figure>


<h2 id="order属性"><a href="#order属性" class="headerlink" title="order属性"></a>order属性</h2><blockquote>
<p>order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">order:<span class="number">1</span>;</span><br></pre></td></tr></table></figure>



<p>阮一峰的博客<a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" target="_blank" rel="noopener">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a></p>
<h1 id="携程旅行网"><a href="#携程旅行网" class="headerlink" title="携程旅行网"></a>携程旅行网</h1><blockquote>
<p>flex布局的应用。</p>
</blockquote>
<h1 id="360浏览器"><a href="#360浏览器" class="headerlink" title="360浏览器"></a>360浏览器</h1><h2 id="fullpage的使用"><a href="#fullpage的使用" class="headerlink" title="fullpage的使用"></a>fullpage的使用</h2><blockquote>
<p>fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站。</p>
</blockquote>
<p>参考文档 <a href="http://www.dowebok.com/77.html" target="_blank" rel="noopener">http://www.dowebok.com/77.html</a></p>
<p>下载地址 <a href="http://www.dowebok.com/77.html" target="_blank" rel="noopener">https://github.com/alvarotrigo/fullPage.js</a></p>
<h3 id="基本使用"><a href="#基本使用" class="headerlink" title="基本使用"></a>基本使用</h3><ol>
<li>引入jQuery文件，因为fullpage是jquery插件</li>
<li>引入fullpage的js文件，<strong><em>不要引入fullpage的css文件，不然容易样式冲突。</em></strong> </li>
<li>页面结构</li>
<li>编写js代码</li>
</ol>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 页面结构 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--每一个class为section的div都是一屏,section这个类是固定的--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>我是内容1<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>我是内容2<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>我是内容3<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"section"</span>&gt;</span>我是内容4<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//编写js代码</span></span><br><span class="line">$(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    $(<span class="string">"#box"</span>).fullpage();</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//背景颜色 </span></span><br><span class="line"><span class="comment">//['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']</span></span><br></pre></td></tr></table></figure>


<h3 id="鼠标滚动事件-了解"><a href="#鼠标滚动事件-了解" class="headerlink" title="鼠标滚动事件(了解)"></a>鼠标滚动事件(了解)</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">    <span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line">        <span class="built_in">document</span>.onmousewheel = <span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>&#123;</span><br><span class="line">            <span class="comment">/*鼠标滚动的量 下滚是负 上滚是正*/</span></span><br><span class="line">            <span class="keyword">if</span>(e.wheelDelta &lt; <span class="number">0</span>)&#123;</span><br><span class="line">                count ++;</span><br><span class="line">            &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">                count --;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="built_in">console</span>.log(count);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;<span class="regexp">/script&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="常用参数"><a href="#常用参数" class="headerlink" title="常用参数"></a>常用参数</h3><table>
<thead>
<tr>
<th>属性名称</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td><strong><em>sectionsColor</em></strong></td>
<td>设置每一个section的背景颜色</td>
</tr>
<tr>
<td>controlArrows</td>
<td>定义是否使用箭头来控制幻灯片，默认true</td>
</tr>
<tr>
<td>verticalCentered</td>
<td>设定每一个section的内容是否垂直居中，默认true，</td>
</tr>
<tr>
<td>resize</td>
<td>设定字体是否随着窗口缩放而缩放，默认false，一般不修改</td>
</tr>
<tr>
<td><strong><em>scrollingSpeed</em></strong></td>
<td>设置滚动的速度，默认700毫秒</td>
</tr>
<tr>
<td>easing</td>
<td>设置动画的方式，默认是easeInOutCubic,如果想要修改此页，需要引入jquery.easing.js</td>
</tr>
<tr>
<td>css3</td>
<td>是否使用css3 transform来实现滚动效果，默认true，不用修改，CSS3的动画效率比较js高。</td>
</tr>
<tr>
<td>loopTop</td>
<td>滚动到顶部后是否连续滚动到底部，默认false</td>
</tr>
<tr>
<td>loopBottom</td>
<td>滚动到底部后是否连续滚动到顶部，默认false</td>
</tr>
<tr>
<td>loopHorizontal</td>
<td>设置幻灯片是否循环滚动，默认true</td>
</tr>
<tr>
<td><strong><em>continuousVertical</em></strong></td>
<td>是否循环滚动，默认为false，如果设置为true，则页面会循环滚动，不会出现loopTop与loopBottom那样的跳动。</td>
</tr>
<tr>
<td>autoScrolling</td>
<td>是否使用插件的滚动方式，默认true，如果选择false，会出现浏览器子代的滚动条，将不会按页滚动，按照滚动进行滚动。</td>
</tr>
<tr>
<td>scrollBar</td>
<td>是否包含滚动条，默认false，如果设置为true，那么浏览器自定的滚动条会出现，这个时候，页面滚动还是按页滚动，但是浏览器也能滚动。不建议开启，不然会不同步。</td>
</tr>
<tr>
<td>paddingTop/paddingBottom</td>
<td>给每一个section设置一个paddingTop或者paddingBottom,默认值为0，如果需要给页面设置一个固定定位的头部菜单或者底部菜单的时候，可以使用这两个选项。</td>
</tr>
<tr>
<td>keyboardScrolling</td>
<td>是否可以使用键盘方向键导航，默认true</td>
</tr>
<tr>
<td><strong><em>navigation</em></strong></td>
<td>是否显示导航，默认为false，设置为true，会显示小圆点，作为导航</td>
</tr>
<tr>
<td>navigationPositon</td>
<td>导航小圆点的位置，设置left或者right，默认是right</td>
</tr>
<tr>
<td>navigationTooltips</td>
<td>小圆点的提示信息，鼠标一上去能看到提示信息</td>
</tr>
<tr>
<td>showActiveTooltip</td>
<td>是否显示当前页面的导航的tooltip信息，默认是false</td>
</tr>
<tr>
<td>slidesNavigation</td>
<td>是否显示横向幻灯片的导航，默认为false</td>
</tr>
<tr>
<td>slidesNavPosition</td>
<td>设置横向幻灯片的位置，top或者bottom，默认bottom</td>
</tr>
<tr>
<td>sectionSelector</td>
<td>section的选择器，默认是.section</td>
</tr>
<tr>
<td>slideSelector</td>
<td>slide的选择器，默认是.slide</td>
</tr>
</tbody></table>
<h3 id="常用回调函数"><a href="#常用回调函数" class="headerlink" title="常用回调函数"></a>常用回调函数</h3><table>
<thead>
<tr>
<th>方法名</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>afterLoad(anchorLink, index)</td>
<td>滚动到某一个section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算</td>
</tr>
<tr>
<td>onLeave(index,nextIndex,diretion)</td>
<td>当我们离开一个section时，会触发这个函数，index是离开的页面的序号，从1开始计算。  nextIndex是滚动到的页面的序号，direction是往上还是往下滚动，值是up或者down.  return false可以取消滚动</td>
</tr>
<tr>
<td>afterResize()</td>
<td>窗口大小发生改变后会触发的回调函数</td>
</tr>
<tr>
<td>afterSlideLoad(anchor,index,  slideAnchor,slideIndex)</td>
<td>页面滚动到某一个幻灯片的时候会触发这个回调函数</td>
</tr>
<tr>
<td>afterSlideLeave(anchor,index,slideIndex,  diretion,nextSlideIndex)</td>
<td>当离开某一个幻灯片的时候会触发一次这个回调函数。</td>
</tr>
</tbody></table>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/blog/tags/H5C3/" rel="tag"># H5C3</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blog/2018/01/01/H5C3/H5-API/" rel="prev" title="H5的API">
      <i class="fa fa-chevron-left"></i> H5的API
    </a></div>
      <div class="post-nav-item">
    <a href="/blog/2018/03/03/Ajax/ajax/" rel="next" title="Ajax">
      Ajax <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML5的发展-了解"><span class="nav-text">HTML5的发展(了解)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#HTML5的概念"><span class="nav-text">HTML5的概念</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#语法规范"><span class="nav-text">语法规范</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#新增语义标签及兼容"><span class="nav-text">新增语义标签及兼容</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#表单"><span class="nav-text">表单</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#DOM扩展"><span class="nav-text">DOM扩展</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#获取元素的新方法"><span class="nav-text">获取元素的新方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#类名操作"><span class="nav-text">类名操作</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSS3"><span class="nav-text">CSS3</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS3的现状"><span class="nav-text">CSS3的现状</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#如何对待"><span class="nav-text">如何对待</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#选择器"><span class="nav-text">选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#关系选择器"><span class="nav-text">关系选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#属性选择器"><span class="nav-text">属性选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#伪类选择器"><span class="nav-text">伪类选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他选择器"><span class="nav-text">其他选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#伪元素选择器"><span class="nav-text">伪元素选择器</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#盒子模型-box-sizing"><span class="nav-text">盒子模型(box-sizing)</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#背景"><span class="nav-text">背景</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#background-size"><span class="nav-text">background-size</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#background-clip-了解"><span class="nav-text">background-clip(了解)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#background-origin-了解"><span class="nav-text">background-origin(了解)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多重背景"><span class="nav-text">多重背景</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#渐变"><span class="nav-text">渐变</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#线性渐变"><span class="nav-text">线性渐变</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#径向渐变"><span class="nav-text">径向渐变</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#圆角"><span class="nav-text">圆角</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#阴影"><span class="nav-text">阴影</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#文字阴影："><span class="nav-text">文字阴影：</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#颜色"><span class="nav-text">颜色</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#过渡"><span class="nav-text">过渡</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#过渡的属性"><span class="nav-text">过渡的属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#属性合写"><span class="nav-text">属性合写</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2D转换"><span class="nav-text">2D转换</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#scale缩放"><span class="nav-text">scale缩放</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#translate平移"><span class="nav-text">translate平移</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#rotate旋转"><span class="nav-text">rotate旋转</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#skew斜切"><span class="nav-text">skew斜切</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#transform-origin转换原点"><span class="nav-text">transform-origin转换原点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#转换合写问题"><span class="nav-text">转换合写问题</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3D转换"><span class="nav-text">3D转换</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#坐标轴"><span class="nav-text">坐标轴</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#rotate旋转-1"><span class="nav-text">rotate旋转</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#translate平移-1"><span class="nav-text">translate平移</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#perspective透视"><span class="nav-text">perspective透视</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#ransform-style"><span class="nav-text">ransform-style</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#backface-visibility"><span class="nav-text">backface-visibility</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#动画"><span class="nav-text">动画</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#animation详解"><span class="nav-text">animation详解</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#动画库的使用"><span class="nav-text">动画库的使用</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#web字体"><span class="nav-text">web字体</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#web字体（了解）"><span class="nav-text">web字体（了解）</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字体图标（重点）"><span class="nav-text">字体图标（重点）</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#切割轮播图"><span class="nav-text">切割轮播图</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#弹性布局-伸缩布局"><span class="nav-text">弹性布局(伸缩布局)</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#flex-direction"><span class="nav-text">flex-direction</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#justify-content-重点"><span class="nav-text">justify-content(重点)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#align-items-重点"><span class="nav-text">align-items(重点)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#flex-wrap"><span class="nav-text">flex-wrap</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#align-content"><span class="nav-text">align-content</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#flex属性"><span class="nav-text">flex属性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#order属性"><span class="nav-text">order属性</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#携程旅行网"><span class="nav-text">携程旅行网</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#360浏览器"><span class="nav-text">360浏览器</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#fullpage的使用"><span class="nav-text">fullpage的使用</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#基本使用"><span class="nav-text">基本使用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#鼠标滚动事件-了解"><span class="nav-text">鼠标滚动事件(了解)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常用参数"><span class="nav-text">常用参数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#常用回调函数"><span class="nav-text">常用回调函数</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="大春哥"
      src="/blog/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">大春哥</p>
  <div class="site-description" itemprop="description">IT</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blog/archives/">
        
          <span class="site-state-item-count">35</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blog/categories/">
          
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/blog/tags/">
          
        <span class="site-state-item-count">17</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">大春哥</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/blog/lib/anime.min.js"></script>
  <script src="/blog/lib/velocity/velocity.min.js"></script>
  <script src="/blog/lib/velocity/velocity.ui.min.js"></script>

<script src="/blog/js/utils.js"></script>

<script src="/blog/js/motion.js"></script>


<script src="/blog/js/schemes/pisces.js"></script>


<script src="/blog/js/next-boot.js"></script>




  




  
<script src="/blog/js/local-search.js"></script>













  

  

</body>
</html>
